<script setup lang="ts">
  import Header from '@/components/pages/return-factory/module/detail/Header.vue'
  import BaseInfo from '@/components/pages/return-factory/module/detail/BaseInfo.vue'
  import { useRoute, useRouter } from 'vue-router'
  import { onMounted, ref } from 'vue'
  import { useGetModuleDetail, useModulesDel } from '@/services/pages/return-factory'
  import CustomFieldConnect from '@/components/pages/return-factory/module/detail/custom-field-connect/Index.vue'
  import ModuleModal from '@/components/pages/param-set/return-factory/module/ModuleModal.vue'
  import { ElMessageBox, ElTabs, ElTabPane } from 'element-plus'
  import infoTip from '@/config/info-tip'
  import { HMessage } from '@/components/common/message'
  import { useTagsViewStore } from '@/store/modules/tagsView'
  import routeComponentName from '@/config/route-component-name'
  import DetectFieldConnect from '@/components/pages/return-factory/module/detail/detect-field-connect/Index.vue'

  const { moduleDetail, getModuleDetailLoading, getModuleDetail } = useGetModuleDetail()
  const { del } = useModulesDel()

  defineOptions({
    name: routeComponentName.returnFactory.returnFactoryModuleDetail,
  })

  // 激活路由对象
  const route = useRoute()

  // 激活的标签名
  const tabActiveName = ref<'customFieldConnect' | 'detectFieldConnect'>('customFieldConnect')

  // 模块编辑弹窗显示状态
  const moduleModalVisible = ref(false)

  // 全局路由对象
  const router = useRouter()

  // 标签状态管理
  const tagsViewStore = useTagsViewStore()

  // 自定义字段关联组件实例
  const customFieldConnectInstance = ref<InstanceType<typeof CustomFieldConnect> | null>(null)

  // 检测字段关联组件实例
  const detectFieldConnectInstance = ref<InstanceType<typeof DetectFieldConnect> | null>(null)

  /**
   * 模块删除事件
   */
  const handleDel = () => {
    ElMessageBox({
      title: '提示',
      message: infoTip.returnFactory.module.delOne,
      showCancelButton: true,
      type: 'error',
      async beforeClose(action, instance, done) {
        if (['close', 'cancel'].includes(action)) {
          done()
          return
        }

        if (action === 'confirm') {
          instance.confirmButtonLoading = true
          instance.cancelButtonLoading = true
          const res = await del([route.params.id as string])
          instance.confirmButtonLoading = false
          instance.cancelButtonLoading = false
          if (res.code === 20000) {
            tagsViewStore.delView(route.path)
            router.back()
            HMessage.success(infoTip.returnFactory.module.multipleDelSuccess)
            done()
            return
          }

          HMessage.error(res.message)
        }
      },
    })
  }

  /**
   * 获取字段列表
   */
  const getList = () => {
    if (tabActiveName.value === 'detectFieldConnect' && detectFieldConnectInstance.value) {
      detectFieldConnectInstance.value.getList()
    }

    if (tabActiveName.value === 'customFieldConnect' && customFieldConnectInstance.value) {
      customFieldConnectInstance.value.getList()
    }
  }

  onMounted(async () => {
    if (route.params.id) {
      await getModuleDetail(route.params.id as string)
      getList()
    }
  })
</script>

<template>
  <div v-loading="getModuleDetailLoading" class="return-factory-module-detail-wrapper">
    <div class="return-factory-module-detail">
      <div class="header">
        <Header
          :module-id="moduleDetail.id"
          :module-name="moduleDetail.name"
          :module-status="!moduleDetail.status"
          @edit="moduleModalVisible = true"
          @del="handleDel"
        ></Header>
      </div>
      <div class="divider"></div>
      <div class="base-info">
        <BaseInfo :module-detail="moduleDetail"></BaseInfo>
      </div>
      <div class="tables">
        <el-tabs v-model="tabActiveName" @tab-change="getList">
          <el-tab-pane label="返厂字段" name="customFieldConnect">
            <custom-field-connect
              ref="customFieldConnectInstance"
              :module-id="(route.params.id as string) || ''"
            ></custom-field-connect>
          </el-tab-pane>
          <el-tab-pane label="检测字段" name="detectFieldConnect">
            <detect-field-connect
              ref="detectFieldConnectInstance"
              :module-id="moduleDetail.id"
            ></detect-field-connect>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <module-modal
      v-model:visible="moduleModalVisible"
      :module-id="(route.params.id as string) || ''"
      @update="getModuleDetail((route.params.id as string) || '')"
    ></module-modal>
  </div>
</template>

<style scoped lang="scss">
  .return-factory-module-detail-wrapper {
    height: calc(100vh - 92px);
    width: 100%;
    box-sizing: border-box;
    padding: 12px;

    .return-factory-module-detail {
      background-color: #fff;
      width: 100%;
      height: 100%;
      padding: 12px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;

      .header {
        box-sizing: border-box;
        width: 100%;
        padding: 0 12px;
      }

      .divider {
        border-bottom: 1px dotted #d4d4d4;
        margin: 12px 0;
      }

      .base-info {
        padding: 0 12px;
        width: 100%;
        box-sizing: border-box;
      }

      .tables {
        flex: 1;
        height: 0;
        box-sizing: border-box;
        padding: 32px 12px 0 12px;

        :deep(.el-tabs) {
          height: 100%;

          .el-tabs__content {
            flex: 1;
            height: 0;

            .el-tab-pane {
              height: 100%;
            }
          }
        }
      }
    }
  }
</style>
